import NavBar from "../components/commons/navbar/NavBar.tsx";
import ArticlePageContainer from "../components/article/ArticlePageContainer.tsx";
import "../styles/modules/article.css"
import Footer from "../components/commons/Footer.tsx";
import {useSearchParams} from "react-router-dom";
import {useEffect, useState} from "react";
import Article from "../model/Article.ts";
const ArticlePage = () => {

    const [searchParams] = useSearchParams();

    const articleId = searchParams.get('articleId');
    console.log(articleId)

    const [article, setArticle] = useState<Article>()



    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(`http://127.0.0.1:5000/api/articles/${articleId}`);
                const jsonData = await response.json();
                console.log(jsonData)
                setArticle(jsonData)

            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };

        fetchData();
    }, []);




    return (

        <>
            <NavBar/>


            <main className="align-items-center justify-content-center flex-column vw-100 overflow-y-scroll">

                {article && <ArticlePageContainer article={article}/>}

                <div id={"margin-auto"}/>




                <Footer/>
            </main>
        </>
    )
}

export default ArticlePage